<template>
	<view class="order-page">
		<!-- 页面标题 -->
		<view class="page-header">
			<text>修改工单</text>
		</view>

		<!-- 筛选区域 -->
		<view class="filter-card">
			<view class="filter-item">
				<text class="form-label">工单创建时间</text>
				<picker mode="date" @change="onDateChange">
					<view class="filter-input">
						{{ formData.createTime || '请选择创建时间' }}
					</view>
				</picker>
			</view>
			<view class="filter-item">
				<text class="form-label">起始页</text>
				<input type="number" v-model="formData.page" placeholder="请输入起始页" class="filter-input" />
			</view>
			<view class="filter-item">
				<text class="form-label">页大小</text>
				<input type="number" v-model="formData.pageSize" placeholder="请输入页大小" class="filter-input" />
			</view>
			<button class="primary-btn" @click="loadOrders">查询</button>
		</view>

		<!-- 工单列表 -->
		<view v-if="orders.length > 0" class="order-list">
			<view v-for="order in orders" :key="order.id" class="order-card">
				<view class="order-header">
					<text class="order-id">#{{ order.id }}</text>
					<text class="order-status" :class="'status-' + order.status">
						{{ getStatusText(order.status) }}
					</text>
				</view>
				<view class="order-body">
					<text class="order-title">{{ order.title }}</text>
					<br>
					<text class="order-time">更新时间：{{ order.updateTime }}</text>
				</view>
				<view class="order-footer">
					<button @click="editOrder(order.id, order.status)"
						:class="order.status === 3 ? 'primary-btn' : 'disabled-btn'" :disabled="order.status !== 3">
						修改工单
					</button>
				</view>
			</view>
		</view>

		<!-- 无数据提示区域 -->
		<view v-else-if="loaded" class="no-data">
			<image src="/static/empty-state.png" class="no-data-image" />
			<text class="no-data-title">没有找到可修改的工单</text>
			<text class="no-data-desc">您可以更换筛选条件后重试</text>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				loaded: false,
				statusMap: {
					1: '待审批',
					2: '已审批',
					3: '已驳回',
					4: '操作中',
					5: '已完成',
					6: '已撤销'
				},
				orders: [],
				token: null,
				formData: {
					title: '',
					createTime: '',
					page: 1,
					pageSize: 20
				},
				typeOptions: [],
				selectedTypeText: ""
			};
		},
		methods: {
			getStatusText(status) {
				return this.statusMap[status] || '未知状态';
			},
			onDateChange(e) {
				this.formData.createTime = `${e.detail.value} 00:00`;
			},
			async loadOrders() {
				try {
					this.token = uni.getStorageSync('token');
					const res = await uni.request({
						url: "http://localhost:8082/api/applicant/orderList",
						method: 'PUT',
						header: {
							'Authorization': `Bearer ${this.token}`,
							'Content-Type': 'application/json'
						},
						data: {
							page: this.formData.page,
							pageSize: this.formData.pageSize,
							title: this.formData.title,
							statusList: [3],
							createTime: this.formData.createTime
						}
					});
					if (res.statusCode === 200 && res.data.code === 1) {
						this.orders = res.data.data.records;
						this.loaded = true;
					} else {
						uni.showToast({
							title: '加载失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: '接口请求失败',
						icon: 'none'
					});
				}
			},
			async fetchTypeList() {
				try {
					this.token = uni.getStorageSync('token');
					const res = await uni.request({
						url: "http://localhost:8082/api/applicant/TypeList",
						method: 'GET',
						header: {
							'Authorization': `Bearer ${this.token}`,
							'Content-Type': 'application/json'
						}
					});
					if (res.statusCode === 200 && res.data.code === 1) {
						this.typeOptions = res.data.data.map(item => item.typeName);
					}
				} catch (err) {
					uni.showToast({
						title: '接口请求失败',
						icon: 'none'
					});
				}
			},
			editOrder(orderId, status) {
				if (status === 3) {
					uni.navigateTo({
						url: `/pages/user/editOrder/editOrder?orderId=${orderId}`
					});
				} else {
					uni.showToast({
						title: '当前状态不可修改',
						icon: 'none'
					});
				}
			}
		},
		mounted() {
			this.fetchTypeList();
		}
	};
</script>
<style scoped>
	.order-page {
		padding: 16px;
		background: #f0f4f8;
	}

	/* 页面标题 */
	.page-header {
		background: linear-gradient(90deg, #007bff, #00c6ff);
		color: white;
		padding: 14px;
		border-radius: 12px;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
		margin-bottom: 20px;
	}

	/* 筛选卡片 */
	.header {
		background: linear-gradient(90deg, #1976d2, #2196f3);
		color: white;
		padding: 12px;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		border-radius: 8px;
		margin-bottom: 20px;
	}

	/* 筛选卡片 */
	.filter-card {
		background: #fff;
		border-radius: 10px;
		padding: 16px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	/* 筛选项 */
	.filter-item {
		display: flex;
		align-items: center;
		width: 100%;
		/* ✅ 让每个元素占满整行 */
		margin-bottom: 16px;
	}


	/* 左侧小竖线 label */
	.form-label {
		font-weight: 500;
		font-size: 14px;
		color: #333;
		display: flex;
		align-items: center;
	}

	.form-label::before {
		content: '';
		display: inline-block;
		width: 4px;
		height: 16px;
		background-color: #1976d2;
		border-radius: 2px;
		margin-right: 8px;
	}

	/* 下拉框、输入框 */
	.picker,
	input {
		flex: 1;
		padding: 6px 10px;
		border: 1px solid #ccc;
		border-radius: 6px;
		background: #f9f9f9;
		font-size: 13px;
		color: #333;
	}

	/* 查询按钮 */
	.submit-button {
		width: 100%;
		padding: 12px;
		background: linear-gradient(90deg, #1976d2, #2196f3);
		color: #fff;
		border: none;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		font-weight: 500;
		cursor: pointer;
		margin-top: 10px;
	}

	.filter-input {
		flex: 1;
		padding: 10px 12px;
		border: 1px solid #d0d7de;
		border-radius: 10px;
		background: #f9fbfd;
		color: #333;
		font-size: 14px;
	}

	/* 按钮统一风格 */
	.primary-btn {
		width: 100%;
		padding: 12px;
		background: linear-gradient(90deg, #007bff, #00c6ff);
		color: white;
		font-weight: bold;
		font-size: 15px;
		border: none;
		border-radius: 10px;
		box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
	}

	.disabled-btn {
		width: 100%;
		padding: 12px;
		background: #cfd8e3;
		color: white;
		font-weight: bold;
		font-size: 15px;
		border: none;
		border-radius: 10px;
	}

	/* 工单列表 */
	.order-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	/* 工单卡片 */
	.order-card {
		background: #ffffff;
		padding: 18px;
		border-radius: 16px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
		transition: transform 0.2s;
	}

	.order-card:hover {
		transform: translateY(-2px);
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.order-id {
		font-weight: bold;
		color: #222;
	}

	.order-status {
		font-size: 12px;
		padding: 4px 10px;
		border-radius: 20px;
		font-weight: 500;
	}

	/* 状态颜色标签 */
	.status-1 {
		background: #ffe9c0;
		color: #b97700;
	}

	.status-2 {
		background: #dceeff;
		color: #007bff;
	}

	.status-3 {
		background: #ffd6d6;
		color: #d93030;
	}

	.status-4 {
		background: #c1f0ff;
		color: #00aaff;
	}

	.status-5 {
		background: #d6f5d6;
		color: #28a745;
	}

	.status-6 {
		background: #e0e0e0;
		color: #777;
	}

	.order-body {
		margin-bottom: 12px;
	}

	.order-title {
		font-size: 16px;
		color: #222;
		font-weight: 500;
		margin-bottom: 6px;
	}

	.order-time {
		font-size: 13px;
		color: #666;
	}

	.order-footer {
		display: flex;
		justify-content: flex-end;
	}

	.no-data {
		margin-top: -20px;
		text-align: center;
		padding: 40px 20px;
		color: #888;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.no-data-image {
		width: 400px;
		height: 200px;
		margin-bottom: 20px;
		opacity: 0.8;
	}

	.no-data-title {
		font-size: 16px;
		font-weight: bold;
		color: #555;
		margin-bottom: 8px;
	}

	.no-data-desc {
		font-size: 13px;
		color: #999;
	}
</style>